<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

</head>
<script type="text/javascript">
	
		/**
		* Name 分页过滤器
		*/
		function pagerFilter(data){            
			if (typeof data.length == 'number' && typeof data.splice == 'function'){// is array                
				data = {                   
					total: data.length,                   
					rows: data               
				}            
			}        
			var dg = $(this);         
			var opts = dg.datagrid('options');          
			var pager = dg.datagrid('getPager');          
			pager.pagination({                
				onSelectPage:function(pageNum, pageSize){                 
					opts.pageNumber = pageNum;                   
					opts.pageSize = pageSize;                
					pager.pagination('refresh',{pageNumber:pageNum,pageSize:pageSize});                  
					dg.datagrid('loadData',data);                
				}          
			});           
			if (!data.originalRows){               
				data.originalRows = (data.rows);       
			}         
			var start = (opts.pageNumber-1)*parseInt(opts.pageSize);          
			var end = start + parseInt(opts.pageSize);        
			data.rows = (data.originalRows.slice(start, end));         
			return data;       
		}
		
		function fixWidth(percent)  
		{  
		    return document.body.clientWidth * percent ; //这里你可以自己做调整  
		} 
		/*
		* Name 载入数据
		*/
		$(function(){
			$('#mTb').datagrid({
				url:'getPerson',
				method:'post',
				striped:true,//奇偶行颜色不同
				nowrap:true,//行数据展示在一行
				rownumbers:true,
				singleSelect:false,
				pagination:true,
				multiSort:true,
				fitColumns:true,
				loadMsg:'正在加载哈哈哈',//数据请求时的提示语
				fit:true,
				singleSelect:true,
				/* toolbar:
                     [{
                         text:"增加",
                         iconCls: 'icon-add',
                         handler: function(){
                        	 newUser();
                         }
                     },'-',{
                         text:"修改",
                         iconCls: 'icon-edit',
                         handler: function(){
                        	 editUser();
                         }
                     },'-',{
                         text:"删除",
                         iconCls: 'icon-help',
                         handler: function(){
                        	 removeUser();
                         }
                     }]
                 , */
				columns:[[
				    {field:'id',hidden:'true'},
					{ field:'name',title:'用户',width:fixWidth(0.2),sortable:true},
					{ field:'pass',title:'密码',width:fixWidth(0.2),sortable:true},
					{ field:'sex',title:'性别',width:fixWidth(0.1)},
					{ field:'age',title:'年龄',width:fixWidth(0.1)},
					{ field:'xueli',title:'学历',width:fixWidth(0.1)},
					{ field:'address',title:'地址',width:fixWidth(0.3)}
				]]
			});
			 window.returnValue="http://www.51js.com";   
			var pager = $('#mTb').datagrid('getPager');          
			 var p = $('#mTb').datagrid('getPager');  
			             $(p).pagination({  
			                 pageSize: 10,//每页显示的记录条数，默认为10    
			                  pageList: [5, 10, 15],//可以设置每页记录条数的列表    
			                beforePageText: '第',//页数文本框前显示的汉字    
			                  afterPageText: '页    共 {pages} 页',  
			                  displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',  
			              });  
			          });

	var url;
	function newUser() {
		$('#dlg').dialog('open').dialog('setTitle', '新增');
		$('#fm').form('clear');
		url = 'DoPersonService?operate=add';
	}
	function editUser() {
		var row = $('#mTb').datagrid('getSelected');
		if (row) {
			$('#dlg').dialog('open').dialog('setTitle', '修改');
			$('#fm').form('load', row);
			url = 'DoPersonService?operate=update&id=' + row.id;
		}
	}
	function saveUser() {
		$('#fm').form('submit', {
			url : url,
			onSubmit : function() {
				return $(this).form('validate');
			},
			success : function(result) {
				var result = eval('(' + result + ')');
				if (result.success) {
					
					$.messager.show({
						title : '提示',
						msg : result.message
					});
					$('#dlg').dialog('close'); // close the dialog                        $('#mTb').datagrid('reload');    // reload the user data                    } else {
					$.messager.show({
						title : '提示',
						msg : result.message
					});
					
				}
				var row = $('#mTb').datagrid('reload');
			}
		});
		
		/* $('#dlg').dialog('close'); */
	}
	function removeUser() {
		var row = $('#mTb').datagrid('getSelected');
		if (row) {
			$.messager.confirm('确认', '您确定要删除吗？', function(r) {
				if (r) {
					$.post('DoPersonService?operate=delete', {
						id : row.id
					}, function(result) {
						if (result.success) {
							$.messager.show({ // show error message                                        title: '提示',
								msg : result.message
							});
							$('#mTb').datagrid('reload'); // reload the user data                            } else {
							$.messager.show({ // show error message                                    title: '提示',
								msg : result.message
							});
						}
					}, 'json');
				}
			});
		}
	}
	function doSearch() {
		$('#mTb').datagrid('load', {
			name : $('#username').val(),
			xueli : $('#userxueli').val()
		});
	}
	/* function freshgrid(){
	    //$("#grid").datagrid("reload");
	    var grid = $('#grid'); 
	    var options = grid.datagrid('getPager').data("pagination").options;
	    var page = options.pageNumber;  //获得当前的页数
	    var rows = options.pageSize;    //获得设置的每页显示的行数，此两个参数为分页查询需要
	    $.ajax({ 
	        type:'POST',
	        url:'queryResult.action',
	        data: {'queryId':${param.queryId},'rows':rows,'page':page},
	        success:function(data){ 
	                $('#grid').datagrid('loadData', eval('('+data+')'));
	            } 
	    });     
	} */
</script>
<body>
<div id="user-toolbar">
            <div class="wu-toolbar-button">
                <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="newUser()" plain="true">添加</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="editUser()" plain="true">修改</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="removeUser()" plain="true">删除</a>
            </div> 
            <!-- <div class="wu-toolbar-search"> -->
            <div>
                <label>起始时间：</label><input class="easyui-datebox" style="width:100px">
                <label>结束时间：</label><input class="easyui-datebox" style="width:100px">
                <label>用户组：</label> 
                <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                    <option value="0">选择用户组</option>
                    <option value="1">黄钻</option>
                    <option value="2">红钻</option>
                    <option value="3">蓝钻</option>
                </select>
                <label>关键词：</label><input class="wu-text" style="width:100px">
                <a href="#" class="easyui-linkbutton"  iconCls="icon-search" onclick='doSearch()'>开始检索</a>
            </div>
        </div>
	<table id="mTb"  width="100%;height:400px" toolbar="#user-toolbar">
	</table>
	<div id="dlg" class="easyui-dialog"
		style="width: 400px; height: 280px; padding: 10px 20px" closed="true"
		buttons="#dlg-buttons">
		<div class="ftitle">用户信息</div>
		<form id="fm" method="post" novalidate>
			<div class="fitem">
				<label>姓名:</label> <input name="name" class="easyui-validatebox"
					required="true">
			</div>
			<div class="fitem">
				<label>密码:</label> <input name="pass" class="easyui-validatebox"
					required="true">
			</div>
			<div class="fitem">
				<label>性别:</label> <input name="sex" class="easyui-validatebox"
					required="true">
			</div>
			<div class="fitem">
				<label>年龄:</label> <input name="age" class="easyui-validatebox"
					required="true">
			</div>
			<div class="fitem">
				<label>学历:</label> <input name= "xueli" class="easyui-validatebox"
					required="true">
			</div>
			<div class="fitem">
				<label>地址:</label> <input name="address" class="easyui-validatebox"
					required="true">
			</div>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
			onclick="saveUser()">提交</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
	</div>
</body>

</html>